<template>
	<view class="wrapper">
        <!--订单状态 -->
        <view class="tabs">
            <text class="active">全部</text>
            <text>代付款</text>
            <text>已付款</text>
            <text>退款/退货</text>
        </view>
		<scroll-view class="orders" scroll-y>
            <view :key='item.order_id' v-for='item in orderList' class="item">
                <template :key='p.goods_id' v-for='p in item.goods'>
                <!-- 商品图片 -->
                <image class="pic" :src="p.goods_small_logo"></image>
                <!-- 商品信息 -->
                <view class="meta">
                    <view class="name">{{p.goods_name}}</view>
                    <view class="price">
                    <text>￥</text>{{p.goods_price}}<text>.00</text>
                    </view>
                    <view class="num">x{{p.goods_number}}</view>
                </view>
                </template>
                <!-- 总价 -->
                <view class="amount">
                共{{item.total_count}}件商品 总计: ￥{{item.total_price}}(含运费0.00)
                </view>
                <!-- 其它 -->
                <view class="extra">
                订单号: {{item.order_number}}
                <button  @click='handlePay(item.order_number)' size="mini" type="primary">支付</button>
                </view>
            </view>
            </scroll-view>
	</view>
</template>

<script>
import {postOrdersall,postreq_unifiedorder} from '@/api/logo.js'; // 引入api
	export default {
		data() {
			return {
				title: 'Hello',
                orderList:[],
                orderNumber: ''
			}
		},
		onLoad(param) {
            this.orderNumber = param.order_number
            this.loadOrderList()
		},
		methods: {
          async  loadOrderList(){
                const data =await postOrdersall( {type: 1},{
                    Authorization: uni.getStorageSync('mytoken')
                })
                console.log('====================================');
                console.log('eeee',data);
                console.log('====================================');
                if (data.meta.status === 200) {
                    this.orderList = data.message.orders
                    console.log(data);
                } else {
                    uni.showToast({
                    title: data.meta.msg
                    })
                }
            },
            // handlePay(num){
            //     console.log('====================================');
            //     console.log('tttt',num);
            //     console.log('====================================');
            // }
           async handlePay(orderNumber){
            console.log('ddddddddddddd',orderNumber);
                const data =await postreq_unifiedorder({
                    order_number: orderNumber
                    },{
                    Authorization: uni.getStorageSync('mytoken')
                    })
                      // 2、如果委托成功,那么返回的数据用于进行实际的支付操作
                    if (data.meta.status === 200) {
                    const pay = data.message.pay
                    wx.requestPayment({
                       ...pay,
                    //    success:(res) => {
                    //     // 如果付款成功，该方法会调用
                    //   console.log(111111111);
                    //    } 
                    success: () => {
                        // 如果付款成功那么，该方法就会触发
                        // 支付成功后，购物车中被支付过的商品需要删除
                        // 1、获取购物车原有数据
                        const cart = uni.getStorageSync('mycart')
                        // 2、获取支付的商品的数据
                        const currentOrder = this.orderList.filter(item => {
                            return item.order_number === orderNumber
                        })
                        const goods = currentOrder[0].goods
                        // 3、删除购物车中goods中包含的商品
                        const result = cart.filter(item => {
                            return !goods.some(p => {
                            return p.goods_id === item.goods_id
                            })
                        })
                        // 4、把剩下的数据再写回缓存
                        uni.setStorageSync('mycart', result)
            },
                        fail (err) {
                            console.error('pay fail', err)
                        }
                     })   
                    } else {
                    uni.showToast({
                        title: data.meta.msg
                    })
                    }
            }
		}
	}
</script>
<style scoped lang="less">
  .tabs {
    display: flex;
    height: 96rpx;
    line-height: 96rpx;
    background-color: #fff;
    box-shadow: 0 4rpx 10rpx #ccc;

    text {
      flex: 1;
      text-align: center;
      font-size: 27rpx;
      color: #333;

      &.active {
        color: #ea4451;
      }
    }
  }

  .orders {
    width: 100%;
    background-color: #f4f4f4;

    position: absolute;
    top: 97rpx;
    bottom: 0;
  }

  .item {
    padding: 30rpx 20rpx 0;
    margin-top: 16rpx;
    background-color: #fff;

    .pic {
      width: 200rpx;
      height: 200rpx;
      float: left;
    }

    .meta {
      height: 200rpx;
      margin-left: 230rpx;
      font-size: 27rpx;
      color: #333;
      position: relative;
    }

    .name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price {
      position: absolute;
      bottom: 0;

      color: #ea4451;
      font-size: 33rpx;

      text {
        font-size: 22rpx;
      }
    }

    .num {
      position: absolute;
      bottom: 0;
      right: 20rpx;
      color: #333;
    }

    .amount {
      text-align: right;
      padding: 20rpx;
      font-size: 24rpx;
      border-top: 1rpx solid #eee;
      border-bottom: 1rpx solid #eee;
      margin-top: 20rpx;
      color: #999;
    }

    .extra {
      padding: 30rpx;
      font-size: 24rpx;
      color: #999;
      position: relative;

      button {
        position: absolute;
        right: 20rpx;
        font-size: 24rpx;
        margin-top: -10rpx;
      }
    }
  }
</style>